$(function () {
  var layer=layui.layer
 


  //初始化友情链接
  initTable()
  function initTable(){
    $.ajax({
      type:'get',
      url:'admin/links',
      success:function(res){
      if(res.status!=0) return layer.msg('后台数据渲染初始化失败')
      //使用模板引擎向tbody里面放内容
      var htmlStr=template('table-tpl',res)
      $('tbody').html(htmlStr)
    }
  
  })
  }

  let addIndex;
  let editIndex;
// ------------------------------------  添加数据 ------------------------
// 点击 添加链接 ，出现弹层
$('button:contains("添加")').on('click', function () {
  // 实现一个弹出层
  // addIndex 用于后面关闭添加弹层的
  addIndex = layer.open({
    area: ['500px', '350px'],
    title: '添加友情链接',
    content: $('#add-form-tpl').html(), // 获取id为add-form-tpl元素里面的内容，当作弹出层的内容
    type: 1
  });
})

// 点击上传图片按钮触发文件域的单击事件
$('body').on('click','#urlIcon',function(){
  $('#linkFile').trigger('click')
})

// 当文件域发生改变时触发事件
$('body').on('change','#linkFile',function(){
  //找到文件对象
  let fileObj=this.files[0]
  //为文件对象生成一个临时的url，可以访问到我们选择的图片
  let url=URL.createObjectURL(fileObj)
  $('#preIcon').attr('src',url)
     //点击提交将数据提交到后台,整个表单进行提交
    $('body').on('submit','#add-form',function(e){
    e.preventDefault()
    //收集表单数据
    let fd=new FormData(this)

    //ajax收集数据
    $.ajax({
      url:'admin/links',
      data:fd,
      type : 'POST',
      processData:false,
      contentType:false,
      success:function(res){
        //无论成功还是失败都提示
        layer.msg(res.message);
          if (res.status === 0) {
             initTable()//后台数据存储之后再次将后台数据渲染到页面
             layer.close(addIndex)
        }
      }
    })
  })
})

  //点击编辑按钮，弹出层弹出
  $('body').on('click','#linkEdit',function(e){

    editIndex = layer.open({
      area: ['500px', '350px'],
      title: '编辑友情链接',
      content: $('#edit-form-tpl').html(), // 获取id为add-form-tpl元素里面的内容，当作弹出层的内容
      type: 1,
    });
    //点击当前的编辑按钮获取当前的id
    //console.log(this.dataset.id)
    var id=this.dataset.id
    $.ajax({
      type:'GET',
      url:'admin/links/'+id,
      success:function(res){
      if(res.status!=0) return  layer.msg('根据id获取数据失败');
        //根据id获取数据成功后  console.log(res);
       
         $('input[name=linkname]').val(res.data.linkname)
         $('input[name=linkurl]').val(res.data.linkurl)
        $('input[name=linkdesc]').val(res.data.linkdesc)
        //这里面要写uploads，可以根据前面写好的路径参考一下
        $('#preIcon').attr('src', 'http://8.131.91.46:7004/uploads/' + res.data.linkicon)
        
     }
  })

  

  //点击提交将数据提交到后台,整个表单进行提交
    $('body').on('submit','#edit-form',function(e){
      e.preventDefault()
      //收集表单数据
       let fd=new FormData(this)
      //ajax收集数据
      $.ajax({
        url:'admin/links/'+id,
        data:fd,
        type : 'put',
        processData:false,
        contentType:false,
        success:function(res){
          //无论成功还是失败都提示
          layer.msg(res.message);
            if (res.status === 0) {
               initTable()//后台数据存储之后再次将后台数据渲染到页面
               layer.close(editIndex )
          }
        }
      })
    })
})

//点击删除，删除当前信息
 $('body').on('click','#linkDelect',function(e){
    e.preventDefault()
    var id=this.dataset.id
    layer.confirm('确定删除吗?', {icon: 3, title:'提示'}, function(index){
      //do something
      $.ajax({
        type:'DELETE',
        url:'admin/links/'+id,
        success:function(res){
        if(res.status!=0) return layer.msg('删除数据失败')
        layer.msg('删除数据成功')
        initTable()
        layer.close(index);
        }
    })
      
    });

 })
    




})

